﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            padding: 10px;
			font-size:12px;
            margin: 0;
        }
		.ipt {padding:3px;margin:0;vertical-align:middle}
		.title {border-bottom: 1px dashed purple; padding:3px 0; margin-bottom:5px; font-size:14px; font-weight:bold; margin-top:10px;}
        .item span{display:inline-block; padding-right:5px;}
        .item .r {color:green; font-weight:bold}
        .item .w {color:red; font-weight:bold}
        .item_err {color:red; }
    </style>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="json2.js"></script>
    <script type="text/javascript">
        $(function () {
            $(":radio[name=mcKeyOption]").click(function () {
                if ($(this).val() == "2") {
                    $("#mcKey_encrypted").show();
                } else {
                    $("#mcKey_encrypted").hide();
                }
            });
        });

        function __receive(info) {
            // var value = eval("(" + info + ")"); 
        }
 
        function login() {
            var host = $("#host").val();
            var username = $("#username").val();
            var pass = $("#password").val();
            var vr = window.external.Login(host, username, pass);
            var resp = eval("(" + vr + ")");            

            if (resp.err_code == 200) {
			    $("#plogin input").attr("disabled", "disabled");
                $("#pbasecfg").show();
                $("#basecfgpanel").html("正在获取和初始化基本配置信息...");
                alert(resp.err_msg);
                vr = window.external.InitBaseCfg();
                resp = eval("(" + vr + ")");
                if (resp.gateway_cnt) {
                    $("#gwcnt").text(resp.gateway_cnt);
                }
                if (resp.device_cnt) {
                    $("#devcnt").text(resp.device_cnt);
                }
                $("#basecfgpanel").html(resp.err_msg);
                if (resp.err_code == 200) {
                    $("#pdevice").show();
                }
            } else {
                alert(resp.err_msg);
            }
        }

        function addgateway() {
            var mac = $("#gwEUI").val();
            var vr = window.external.AddGateway(mac);
            var resp = eval("(" + vr + ")");
            if (resp.gateway_cnt) {
                $("#gwcnt").text(resp.gateway_cnt);
            }
            alert(resp.err_msg);
        }

        function addmulticast() {
            var etype = $(":radio[name=mcKeyOption]:checked").val();
            var evalue = $("#mcKey_encrypted").val(); 

            var mac = $("#mgMac").val();
            var devEUI = $("#mgDevEUI").val();
            var vr = window.external.MakeMulticastGroup(mac, devEUI, etype, evalue);
            var resp = eval("(" + vr + ")");
            if (resp.id) {
                $("#mginfo").attr("mgid", resp.id);
                $("#mginfo").text("[" + resp.id + "]" + resp.addr + " name:" + resp.name);
            }
            alert(resp.err_msg);
        }

        function multicast() {
            var mgid = $("#mginfo").attr("mgid");
            if (!mgid || mgid == "") {
                alert("尚未获取组播地址！");
                return;
            }
            var data = $("#mgData").val();
            var vr = window.external.Multicast(mgid, data);
            var resp = eval("(" + vr + ")"); 
            alert(resp.err_msg);
        }

        function adddevices() {
            var devices = $("#txtEUIs").val();
            var vr = window.external.AddDevices(devices);
            var resp = eval("(" + vr + ")");
            if (resp.device_cnt) {
                $("#devcnt").text(resp.device_cnt);
            }
            alert(resp.err_msg);
        }

        function NowTime() {
            var oDate = new Date(),
                oYear = oDate.getFullYear(),
                oMonth = oDate.getMonth() + 1 < 10 ? "0" + (oDate.getMonth() + 1) : (oDate.getMonth() + 1);
            oDay = oDate.getDate() < 10 ? "0" + oDate.getDate() : oDate.getDate();
            oHour = oDate.getHours() < 10 ? "0" + oDate.getHours() : oDate.getHours();
            oMinute = oDate.getMinutes() < 10 ? "0" + oDate.getMinutes() : oDate.getMinutes();
            oSecond = oDate.getSeconds() < 10 ? "0" + oDate.getSeconds() : oDate.getSeconds();

            oTime = oYear + '-' + oMonth + '-' + oDay + " " + oHour + ":" + oMinute + ":" + oSecond;//最后拼接时间
            return oTime;
        }

        function loadmoreapp() {
            var list = window.external.ApplicationList(1000);
            var arr = eval("(" + list + ")");
            var $select = $('<select>');
            for (var i = 0; i < arr.length; i++) {
                var $option = $('<option>').val(arr[i].id).text(arr[i].name);
                $select.append($option);
            }
            $select.change(function () {
                var selapp = $select.find("option:selected");
                var appid = selapp.val();
                window.external.SetContextApplicationId(appid);
                $("#appnamelabel").text(selapp.text());
            });
            $("#appmore").html("");
            $("#appmore").append($select);
        }
    </script>
</head>
<body>
    <div>
        <div id="plogin">
            <div class="title">登录</div>
            <div style="text-align:center">
                IP:<input type="text" id="host" class="ipt" style="width:120px;" value="localhost" />
                Username:<input type="text" id="username" class="ipt" style="width:60px;" value="admin" />
                Password:<input type="password" id="password" class="ipt" style="width:60px;" value="admin" />
                <input type="button" id="btnLogin" class="ipt" value="登录" style="vertical-align:middle;height:26px;padding:0px;" onclick="login()" />
            </div>
        </div>
        <div id="pbasecfg" style="display: none; ">
            <div class="title">基础配置</div>
            <div id="basecfgpanel">

            </div>
        </div>
        <div id="pdevice" style="display:none;">
            <div class="title">添加网关(<span id="gwcnt">0</span>)</div>
            <div>
                <input type="text" id="gwEUI" class="ipt" />
                <input type="button" id="btnAddGateway" onclick="addgateway()" style="vertical-align:middle;height:26px;padding:0px;" value="添加" />
            </div>
            <div class="title">添加设备(<span id="devcnt">0</span>)</div>
            <div>
                <textarea id="txtEUIs" style="width:98%;height:80px;"></textarea>
                <div>
                    <input type="button" id="btnAddDevs" value="批量添加" onclick="adddevices()" style="vertical-align:middle;height:26px;padding:0px;" />
                    批量添加设备说明：DevEUI 格式要求为 16 个字符，每行一个或是逗号、空格等隔开。
                </div>
            </div>
            <div class="title">组播消息</div>
            <div>
                <div>组播地址为8个16进制字符，组中任一devEUI已经配置过可为空。注：组播配置中至少需要添加一个位于该组的devEUI。</div>
                <div>
                    mcKey_encrypted：<label><input type="radio" name="mcKeyOption" value="0" />无</label>
                    <label><input type="radio" name="mcKeyOption" value="1" checked />默认</label>
                    <label><input type="radio" name="mcKeyOption" value="2" />自定义</label>
                    <input type="text" id="mcKey_encrypted" class="ipt" maxlength="32" style="width:260px; display:none;" />
                </div>
                组播地址：<input type="text" id="mgMac" class="ipt" style="width:80px;" />
                组内一devEUI：<input type="text" id="mgDevEUI" class="ipt" style="width:120px;" />
                <input type="button" id="btnAddMultiGroup" onclick="addmulticast()" style="vertical-align:middle;height:26px;padding:0px;" value="获取或添加" />
                <div>
                    当前组播：<span id="mginfo">无</span>
                </div>
                文本或0x十六进制：<input type="text" id="mgData" class="ipt" />
                <input type="button" id="btnMulticast" onclick="multicast()" style="vertical-align:middle;height:26px;padding:0px;" value="发送组播消息" />
            </div>
        </div>
		<div>
		    <div class="title">工具说明</div>
            <div>
                本工具为文章 <a href="https://blog.csdn.net/jiangjunjie_2005/article/details/96169551" target="_blank">LoRa Server@Web 管理设备</a> 配套的一键式操作工具，相关知识准备请点击阅读。<br />
                <br />
                本工具提供自动进行基础配置、添加网关、批量添加节点设备功能。
                <br />
                注：IP可以带端口，形式为 IP:8080，IP 不带端口时默认 8080 端口，如 192.168.1.112，表示 192.168.1.112:8080，如果是本机可以使用默认的 localhost。<br />
            </div>
		</div>
    </div>
    <div id="info">
    </div>
</body>
</html>